<template>
  <div class="vpt-modal-base-self-bg"
       v-if="showModal">
    <div class="vpt-modal-base-self borderclass"
         :style="modalStyle">
      <!-- <img class="top-left"
           src="../../../assets/img/theme3/icon-top-left.png" />
      <img class="top-right"
           src="../../../assets/img/theme3/icon-top-right.png" /> -->
      <header class="vpt-modal-base-self-header">
        <div class="vpt-title">应用运行情况</div>
        <div class="vpt-close"
             @click="onShowModal(false)">
          <img :src="close"
               :style="closeStyle"
               alt="关闭" />
        </div>
      </header>
      <section class="vpt-modal-base-self-body">
        <vptItemView :title="baseData.cluster_name_zh_cn"
                     :itemTitleStyle="itemTitleStyle">
          <template v-slot:title>
            <img class="vpt-img"
                 src="@/assets/img/theme1/arrow-right.png"
                 alt="" />
            <vptPalnTag :type="
                baseData.process_status == 3
                  ? 'success'
                  : baseData.process_status == 2
                  ? 'warn'
                  : 'danger'
              "
                        :text="
                baseData.process_status == 3
                  ? '正常'
                  : baseData.process_status == 2
                  ? '提示'
                  : '告警'
              "></vptPalnTag>
          </template>
        </vptItemView>
        <div class="section-content">
          <div class="section-left">
            <vptItemView :title="'容器组(pod)'"
                         :showList="true">
              <!-- <div class="item-data">
            <label :style="labelStyle">正常</label>
            <em :style="valueStyle" class="vpt-em-green">
              {{ addThousandsSeparator(baseData.podData.normal) }}
            </em>
          </div> -->
              <div class="item-data">
                <label :style="labelStyle">提示</label>
                <em :style="valueStyle"
                    class="vpt-em-organge">
                  {{ addThousandsSeparator(baseData.podData.prompt) }}
                </em>
              </div>
              <div class="item-data">
                <label :style="labelStyle">告警</label>
                <em :style="valueStyle"
                    class="vpt-em-red">
                  {{ addThousandsSeparator(baseData.podData.warning) }}
                </em>
              </div>
            </vptItemView>

            <vptItemView :title="'资源使用情况（使用率）'"
                         :showList="true"
                         :itemStyle="itemStyle">
              <template v-slot:content>
                <vptPieView :width="pieWidth"
                            :height="pieHeight"
                            v-bind="baseData"
                            :isLandscape="isLandscape"
                            :titleFontSize="titleFontSize"
                            :totalFontSize="totalFontSize"
                            :titleTop="titleTop"></vptPieView>
              </template>
            </vptItemView>
          </div>
          <div class="section-right">
            <vptItemView :title="'响应量'">
              <template v-slot:content>
                <div class="vpt-list">
                  <div class="item-data">
                    <div class="item-data-val">
                      {{
                        addThousandsSeparator(
                          baseData.reposeData.request_time_avg
                        )
                      }}
                      ms
                    </div>
                    <label>平均响应时间</label>
                  </div>
                  <div class="item-data">
                    <div class="item-data-val">
                      {{
                        addThousandsSeparator(
                          baseData.reposeData.request_num_max
                        )
                      }}
                    </div>
                    <label>峰值请求数</label>
                  </div>
                  <div class="item-data">
                    <div class="item-data-val">
                      {{
                        addThousandsSeparator(baseData.reposeData.response_time)
                      }}
                      ms
                    </div>
                    <label>最大/最小响应时间</label>
                  </div>
                </div>
              </template>
            </vptItemView>

            <vptItemView :title="'近30天峰值请求数'"
                         :itemStyle="itemStyle">
              <template v-slot:content>
                <vptReuqestView v-if="
                    baseData.request_num_max_30days.length &&
                    baseData.request_num_max_30days[0].data_time &&
                    baseData.request_num_max_30days[0].res_statuscode
                  "
                                :height="lineHeight"
                                :chartData="baseData.request_num_max_30days"
                                :isLandscape="isLandscape"
                                :yAxisFontSize="yAxisFontSize" />
                <div class="empty-div"
                     v-else>暂无数据</div>
              </template>
            </vptItemView>
          </div>
        </div>

        <vptItemView :title="'提示/告警问题'"
                     :itemStyle="palnListStyle">
          <template v-slot:content>
            <vptPalnList type="modal"
                         :list="baseData.waringList"
                         :planListStyle="planListStyle"
                         :planItemStyle="planItemStyle"
                         :itemLeftStyle="itemLeftStyle"
                         :messageStyle="messageStyle"
                         @handleClick="handleClick"></vptPalnList>
          </template>
        </vptItemView>
      </section>
      <!-- <img class="bottom-left"
           src="../../../assets/img/theme3/icon-bottom-left.png" />
      <img class="bottom-right"
           src="../../../assets/img/theme3/icon-bottom-right.png" /> -->
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  defineExpose,
  computed,
  onMounted,
  onUnmounted,
  watch,
} from "vue";
import close from "@/assets/img/theme1/blackclose.png";
import vptPieView from "./components/vpt-pie-view.vue";
import vptItemView from "./components/vpt-item-view.vue";
import vptReuqestView from "./components/vpt-reuqest-view.vue";
import vptPalnTag from "@/components/vpt-base-tag";
import vptPalnList from "@/components/vpt-base-msg-list";
import { addThousandsSeparator } from "@/utils/formatter.js";

const props = defineProps({
  showModal: {
    type: Boolean,
    default: false,
  },
  detailData: {
    type: Object,
    default: () => ({}),
  },
  isLandscape: { type: Boolean, default: false },
  modalStyle: {
    type: Object,
    default: () => ({
      top: "10%",
      width: "7.5rem",
      maxHeight: "7.5rem",
      padding: "0.24rem",
    }),
  },
  titleStyle: {
    type: Object,
    default: () => ({
      // marginLeft: " 0.1rem",
      fontSize: "0.18rem",
    }),
  },
  modalHeaderStyle: {
    type: Object,
    default: () => ({
      // lineHeight: "0.5rem",
    }),
  },
  closeViewStyle: {
    type: Object,
    default: () => ({
      // marginTop: "0.1rem",
      // paddingRight: "0.2rem",
    }),
  },

  closeStyle: {
    type: Object,
    default: () => ({
      width: "0.18rem",
      marginRight: "0.05rem",
    }),
  },
  nameStyle: {
    type: Object,
    default: () => ({
      fontSize: "0.16rem",
    }),
  },
  itemStyle: {
    type: Object,
    default: () => ({
      marginBottom: 0,
    }),
  },
  palnListStyle: {
    marginTop: "0.16rem",
  },
  tagStyle: {
    type: Object,
    default: () => ({}),
  },
  labelStyle: {
    type: Object,
    default: () => ({
      fontSize: "0.14rem",
      marginRight: "0.1rem",
    }),
  },
  valueStyle: {
    type: Object,
    default: () => ({
      fontSize: "0.18rem",
    }),
  },
  pieWidth: {
    type: String,
    default: "130",
  },
  pieHeight: {
    type: String,
    default: "130",
  },
  titleFontSize: { type: Number, default: 12 },
  totalFontSize: { type: Number, default: 12 },
  titleTop: { type: String, default: "25" },
  messageStyle: {
    type: Object,
    default: () => ({
      width: "6rem",
      "white-space": "wrap",
      "-webkit-line-clamp": 3,
      "-webkit-box-orient": "vertical",
      display: "-webkit-box",
    }),
  },
  itemLeftStyle: {
    type: Object,
    default: () => ({}),
  },
  itemTitleStyle: {
    type: Object,
    default: () => ({
      fontSize: "0.16rem",
    }),
  },
  lineHeight: {
    type: String,
    default: "1.3rem",
  },
  yAxisFontSize: {
    type: Number,
    default: 14,
  },
  planListStyle: {
    type: Object,
    default: () => ({
      maxHeight: "4rem",
      marginTop: "0.16rem",
    }),
  },
});

const onShowModal = (value) => {
  emit("onChange", value);
};

const handleClick = (item) => {
  emit("handleClick", item);
};

const emit = defineEmits(["onChange", "handleClick"]);

const baseData = computed(() => {
  return {
    cluster_name_zh_cn: props.detailData.cluster_name_zh_cn,
    podData: {
      normal: props.detailData.normal || "-",
      prompt: props.detailData.prompt || "-",
      warning: props.detailData.warning || "-",
    },
    reposeData: {
      request_time_avg: props.detailData.request_time_avg || "-",
      response_time: props.detailData.response_time || "-",
      request_num_max: props.detailData.request_num_max || "-",
      min: 0,
    },
    request_num_max_30days: props.detailData.request_num_max_30days,
    waringList: props.detailData.prompt_content,
    cpu_usage: props.detailData.cpu_usage,
    cpu_status: props.detailData.cpu_status,
    memory_usage: props.detailData.memory_usage,
    mem_status: props.detailData.mem_status,
    disk_usage: props.detailData.disk_usage,
    disk_status: props.detailData.disk_status,
    process_status: props.detailData.process_status,
  };
});

watch(
  () => props.showModal,
  (value) => {
    // 遮罩层开启时隐藏页面滚动条
    const htmlDom = document.documentElement;
    htmlDom.className = value ? "hidden-scroll" : "";
  },
  { deep: true }
);

// defineExpose({
//   onShowModal,
// });
</script>

<style lang="less">
@import url("../../../assets/style/modal.less");
@import url("./index.less");
.borderclass {
  border-radius: 0.08rem;
}
.hidden-scroll {
  overflow-y: hidden;
}
.top-left {
  position: absolute;
  left: 0;
  top: 0;
}
.top-right {
  position: absolute;
  right: 0;
  top: 0;
}
.bottom-left {
  position: absolute;
  left: 0;
  bottom: 0;
}
.bottom-right {
  position: absolute;
  right: 0;
  bottom: 0;
}
</style>
